<template>
	<view>
		<view class="cu-card article" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-cut">组成原理</view>
				</view>
				<view class="content">
					<image src="https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=942649840,3847768297&fm=85&app=92&f=JPEG?w=121&h=75&s=62B21CC5C225BF4F143CD5320300F040"
					 mode="aspectFit"></image>
					<view class="desc">
						<view> 计算机组成原理，主要介绍计算机的基本组成原理和内部工作机制。</view>
					</view>
				</view>
				<view class="base padding flex flex-wrap">
					<view class="padding-xs">计算机组成原理主要内容包括：\n </view>
					<view class="padding-xs" v-for="(item,index) in contentList" :key="index">
						<view class="cu-tag bg-cyan">{{item.name}}</view>
					</view>
					<image
						@tap="viewImg()"
						style="width: 100%;" 
						src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/cs/zcylTree.png" 
						mode="aspectFill"
					>
					</image>
					
					<view class="padding-xs">
						这门课学起来也不是那么容易，最好把操作系统结合起来学，硬件方面、电路方面的知识都有。用一个词来概括，就是“抽象”。
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: true,
				contentList: [
					{name:'计算机系统的概述'},
					{name:'数据的运算和表示'},
					{name:'存储系统'},
					{name:'指令系统'},
					{name:'中央处理器'},
					{name:'总线'}
				],
				urls: ['cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/cs/zcylTree.png']
			}
		},
		methods: {
			viewImg(){
				 //图片预览
				uni.previewImage({
				  urls: this.urls, // 当前显示图片的http链接
				  longPressActions: {
					  itemList: ['发送给朋友', '保存图片', '收藏'],
					  success: function(data) {
						  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					  },
					  fail: function(err) {
						  console.log(err.errMsg);
					  }
				  }
				})
			}
		}
	}
</script>

<style>

</style>
